<template>
	<customNavigationBar title="企业身份认证" />

	<view class="content">
		<view class="item">
			<view class="title">企业名称</view>

			<view class="box">
				<input placeholder-style="color:#999" type="text" v-model.trim="companyInfomation.companyName" placeholder="请填写企业名称" />
			</view>
		</view>

		<view class="item">
			<view class="title">社会信用码</view>

			<view class="box">
				<input placeholder-style="color:#999" type="text" v-model.trim="companyInfomation.socialCreditCode" placeholder="请填写社会信用码" />
			</view>
		</view>

		<view class="item">
			<view class="title">营业执照起始日期</view>

			<view class="box">
				<picker
					mode="date"
					fields="day"
					start="1949-10-01"
					end="2099-12-31"
					@change="
						(e) => {
							pickerChange(e, 'socialCreditCodeBegin');
						}
					"
				>
					<view
						class="uni-input"
						:style="{ color: !companyInfomation.socialCreditCodeBegin || companyInfomation.socialCreditCodeBegin == '请选择日期' ? '#999' : '#333' }"
					>
						{{ companyInfomation.socialCreditCodeBegin || '请选择日期' }}
					</view>
				</picker>
			</view>
		</view>

		<view class="item">
			<view class="title">公司所在城市</view>
			<view class="inputBox" @click="openAreaSelect">
				<view class="text" v-if="areaSelectList.length === 0">
					<span class="placeholder">请选择</span>
				</view>
				<view class="text" v-else>
					<span v-for="(item, index) in areaSelectList" :key="index">
						{{ item.areaName === '请选择' ? '' : item.areaName }}
					</span>
				</view>
				<image class="more" src="/static/common/icon_more.png"></image>
			</view>
		</view>

		<view class="item">
			<view class="title">公司详细地址</view>

			<view class="box">
				<input placeholder-style="color:#999" type="text" v-model.trim="companyInfomation.address" placeholder="请填写公司地址" />
			</view>
		</view>
		<view class="item">
			<view class="title">联系邮箱</view>

			<view class="box">
				<input placeholder-style="color:#999" type="text" v-model.trim="companyInfomation.email" placeholder="请填写联系邮箱" />
			</view>
		</view>
		<view class="item">
			<view class="title">经营范围</view>

			<view class="box">
				<textarea placeholder-style="color:#999" auto-height v-model.trim="companyInfomation.businessScope" placeholder="请填写公司经营范围"></textarea>
			</view>
		</view>

		<view class="item">
			<view class="title">法人姓名</view>

			<view class="box">
				<input placeholder-style="color:#999" type="text" v-model.trim="companyInfomation.legalPerson" placeholder="请填写法人姓名" />
			</view>
		</view>
		<view class="item">
			<view class="title">法人身份证号</view>

			<view class="box">
				<input placeholder-style="color:#999" type="text" v-model.trim="companyInfomation.certNo" placeholder="请填写法人身份证号" />
			</view>
		</view>
		<view class="item">
			<view class="title">身份证起始日期</view>

			<view class="box">
				<picker
					mode="date"
					fields="day"
					start="1949-10-01"
					end="2099-12-31"
					@change="
						(e) => {
							pickerChange(e, 'legalCertBegin');
						}
					"
				>
					<view class="uni-input" :style="{ color: !companyInfomation.legalCertBegin || companyInfomation.legalCertBegin == '请选择日期' ? '#999' : '#333' }">
						{{ companyInfomation.legalCertBegin || '请选择日期' }}
					</view>
				</picker>
			</view>
		</view>
		<view class="item">
			<view class="title">身份证截止日期</view>

			<view class="box">
				<picker
					mode="date"
					fields="day"
					start="1949-10-01"
					end="2099-12-31"
					@change="
						(e) => {
							pickerChange(e, 'legalCertExpires');
						}
					"
				>
					<view class="uni-input" :style="{ color: !companyInfomation.legalCertExpires || companyInfomation.legalCertExpires == '请选择日期' ? '#999' : '#333' }">
						{{ companyInfomation.legalCertExpires || '请选择日期' }}
					</view>
				</picker>
			</view>
		</view>

		<view class="images">
			<view class="image" @click="chooseImg('socialCreditUrl')">
				<image class="pic" v-if="companyInfomation.socialCreditUrl" :src="companyInfomation.socialCreditUrl" mode="aspectFill"></image>

				<view v-else class="noimg">
					<image src="/static/common/icon_camera.png"></image>
					<text>营业执照照片</text>
				</view>
			</view>
			<view class="image" @click="chooseImg('officeSpaceUrl')">
				<image class="pic" v-if="companyInfomation.officeSpaceUrl" :src="companyInfomation.officeSpaceUrl" mode="aspectFill"></image>

				<view v-else class="noimg">
					<image src="/static/common/icon_camera.png"></image>
					<text>办公场地照片</text>
				</view>
			</view>
			<view class="image" @click="chooseImg('legalCertFrontUrl')">
				<image class="pic" v-if="companyInfomation.legalCertFrontUrl" :src="companyInfomation.legalCertFrontUrl" mode="aspectFill"></image>

				<view v-else class="noimg">
					<image src="/static/common/icon_camera.png"></image>
					<text>法人身份证正面</text>
				</view>
			</view>
			<view class="image" @click="chooseImg('legalCertBackUrl')">
				<image class="pic" v-if="companyInfomation.legalCertBackUrl" :src="companyInfomation.legalCertBackUrl" mode="aspectFill"></image>

				<view v-else class="noimg">
					<image src="/static/common/icon_camera.png"></image>
					<text>法人身份证反面</text>
				</view>
			</view>
		</view>
	</view>

	<view class="submit">
		<view @click="SubmitEvent">提交</view>
	</view>
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
		<view class="popupContent">
			<view class="popupTop">
				<view class="title">
					<view v-for="(item, index) in areaSelectList" :class="areaCurrentIndex == index && 'active'" @click="chooseItem(index)">{{ item?.areaName }}</view>
				</view>
				<image src="/static/common/icon_close.png" class="close" @click="closePopup"></image>
			</view>

			<view class="scrollViewBox">
				<view class="title">请选择</view>

				<scroll-view scroll-y="true" class="scrollView">
					<view class="scrollContent">
						<view
							class="item"
							:class="item?.areaNo === areaSelectList[areaCurrentIndex]?.areaNo && 'active'"
							v-for="(item, index) in allAreaList"
							:key="index"
							@click="selectArea(index)"
						>
							{{ item?.areaName }}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, toRaw } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { commonApis, userApis } from '@/utils/apis';
import { uploadFile } from '../../utils/request';

const companyInfomation = ref({
	companyName: '',
	socialCreditCode: '',
	socialCreditCodeBegin: '请选择日期',
	socialCreditCodeExpires: '2099-12-31',
	socialCreditUrl: '',
	address: '',
	email: '',
	businessScope: '',
	officeSpaceUrl: '',
	legalPerson: '',
	certNo: '',
	legalCertBegin: '请选择日期',
	legalCertExpires: '请选择日期',
	legalCertBackUrl: '',
	legalCertFrontUrl: '',
	provCode: '',
	areaCode: '',
	status: 0
});

onLoad(() => {
	getCompanyInfomation();
});

const getCompanyInfomation = async () => {
	let res = await userApis.getCompanyInfo();
	companyInfomation.value = res.data;
};

const pickerChange = (e, attr) => {
	companyInfomation.value[attr] = e.detail.value;
};
const chooseImg = (attr) => {
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album'], //从相册选择
		success(res) {
			companyInfomation.value[attr] = res.tempFilePaths[0];
		}
	});
};

let areaCurrentIndex = ref(0);
let allAreaList = ref([]);
let areaSelectList = reactive([]);

const chooseItem = async (index) => {
	areaCurrentIndex.value = index;
	let res = await commonApis.getArea({
		parentAreaNo: index === 0 ? '' : areaSelectList[index - 1].areaNo,
		parentLevel: index === 0 ? '' : areaSelectList[index - 1].areaLevel
	});
	allAreaList.value = res.data;
};

const selectArea = async (index) => {
	if (areaSelectList.length > areaCurrentIndex.value) {
		areaSelectList.length = areaCurrentIndex.value + 1;
	}
	let selectItem = allAreaList.value[index];
	areaSelectList[areaCurrentIndex.value] = selectItem;

	switch (areaCurrentIndex.value) {
		case 0:
			companyInfomation.value.provCode = selectItem.areaNo;
			break;
		case 1:
			companyInfomation.value.areaCode = selectItem.areaNo;
			closePopup();
			break;
	}

	if (areaCurrentIndex.value < 1) {
		areaCurrentIndex.value++;
		areaSelectList[areaCurrentIndex.value] = {
			areaName: '请选择'
		};
		let res = await commonApis.getArea({
			parentAreaNo: selectItem.areaNo,
			parentLevel: selectItem.areaLevel
		});
		allAreaList.value = res.data;
	}
};

// 弹出地区选择
const popup = ref();
const openAreaSelect = () => {
	nextTick(async () => {
		popup.value.open();
		areaCurrentIndex.value = 0;
		if (areaSelectList.length == 0) {
			areaSelectList.push({
				areaName: '请选择'
			});
		}

		let res = await commonApis.getArea({});
		allAreaList.value = res.data;
	});
};
const closePopup = () => {
	nextTick(() => {
		popup.value.close();
	});
};

const SubmitEvent = async () => {
	uni.showLoading({
		mask: true,
		title: '上传中,请稍候...'
	});

	if (!companyInfomation.value.companyName) {
		uni.showToast({
			icon: 'none',
			title: '请填写企业名称'
		});
		return;
	}

	if (!companyInfomation.value.socialCreditCode) {
		uni.showToast({
			icon: 'none',
			title: '请填写社会信用码'
		});
		return;
	}

	if (companyInfomation.value.socialCreditCodeBegin == '请选择日期') {
		uni.showToast({
			icon: 'none',
			title: '请选择营业执照起始日期'
		});
		return;
	}
	if (!companyInfomation.value.provCode) {
		uni.showToast({
			icon: 'none',
			title: '请选择公司所在省'
		});
		return;
	}
	if (!companyInfomation.value.areaCode) {
		uni.showToast({
			icon: 'none',
			title: '请选择公司所在市'
		});
		return;
	}
	if (!companyInfomation.value.address) {
		uni.showToast({
			icon: 'none',
			title: '请填写公司地址'
		});
		return;
	}
	if (!companyInfomation.value.businessScope) {
		uni.showToast({
			icon: 'none',
			title: '请填写经营范围'
		});
		return;
	}
	if (!companyInfomation.value.legalPerson) {
		uni.showToast({
			icon: 'none',
			title: '请填写法人姓名'
		});
		return;
	}
	if (!companyInfomation.value.certNo) {
		uni.showToast({
			icon: 'none',
			title: '请填写法人身份证号'
		});
		return;
	}
	if (companyInfomation.value.legalCertBegin == '请选择日期') {
		uni.showToast({
			icon: 'none',
			title: '请选择法人身份证起始日期'
		});
		return;
	}
	if (companyInfomation.value.legalCertExpires == '请选择日期') {
		uni.showToast({
			icon: 'none',
			title: '请选择法人身份证截止日期'
		});
		return;
	}
	if (!companyInfomation.value.socialCreditUrl) {
		uni.showToast({
			icon: 'none',
			title: '请上传营业执照照片'
		});
		return;
	}
	if (!companyInfomation.value.officeSpaceUrl) {
		uni.showToast({
			icon: 'none',
			title: '请上传办公场地照片'
		});
		return;
	}
	if (!companyInfomation.value.legalCertFrontUrl) {
		uni.showToast({
			icon: 'none',
			title: '请上传法人身份证正面照片'
		});
		return;
	}
	if (!companyInfomation.value.legalCertBackUrl) {
		uni.showToast({
			icon: 'none',
			title: '请上传法人身份证反面照片'
		});
		return;
	}

	let p = toRaw(companyInfomation.value);

	if (!p.socialCreditUrl.startsWith('http')) {
		p.socialCreditUrl = await uploadFile(p.socialCreditUrl);
	}
	if (!p.officeSpaceUrl.startsWith('http')) {
		p.officeSpaceUrl = await uploadFile(p.officeSpaceUrl);
	}
	if (!p.legalCertFrontUrl.startsWith('http')) {
		p.legalCertFrontUrl = await uploadFile(p.legalCertFrontUrl);
	}
	if (!p.legalCertBackUrl.startsWith('http')) {
		p.legalCertBackUrl = await uploadFile(p.legalCertBackUrl);
	}

	p = { ...p, status: 0, socialCreditCodeExpires: '2099-12-31' };

	userApis.updateCompanyInfomation(p).then((res) => {
		uni.hideLoading();
		uni.showToast({
			icon: 'none',
			title: '企业信息保存成功',
			mask: true
		});
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/user/user'
			});
		}, 1500);
	});
};

const binddingInfomation = ref(null);

onShow(() => {
	getBinddingList();
});

let binddingBank = () => {
	uni.navigateTo({
		url: '/pages_user/banddingBank/banddingBank'
	});
};

const getBinddingList = async () => {
	let res = await userApis.getBankDetail();
	binddingInfomation.value = res.data;
};
</script>

<style>
page {
	background-color: #f2f4f5;
}
</style>

<style lang="scss" scoped>
.content {
	background-color: #fff;
	padding: 24rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx + 60rpx + 20rpx);

	.item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 28rpx;

		.title {
			padding: 12rpx 0;
			font-size: 28rpx;
			color: #333;
			line-height: 40rpx;
		}
		.box {
			width: 430rpx;
			padding: 12rpx;
			border-bottom: 2rpx solid #e4e4e6;
			input,
			textarea {
				width: 100%;
				font-size: 28rpx;
				color: #333;
				line-height: 40rpx;
			}
			textarea {
				min-height: 150rpx;
			}

			picker {
				font-size: 28rpx;
				color: #333;
				line-height: 40rpx;
			}
		}
	}

	.images {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		align-items: center;
		flex-wrap: wrap;
		gap: 28rpx 70rpx;

		.image {
			width: calc((100% - 70rpx) / 2);
			height: 184rpx;
			background: #f2f3f5;
			border-radius: 16rpx;
			border: 2rpx dashed #999999;

			.pic {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}

			.noimg {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				image {
					width: 44rpx;
					height: 44rpx;
				}
				text {
					margin-top: 8rpx;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
				}
			}
		}
	}
}

.submit {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 30rpx 24rpx calc(env(safe-area-inset-bottom) + 30rpx);
	background-color: #fff;
	view {
		width: 100%;
		background: #2c72ff;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 92rpx;
		text-align: center;

		height: 92rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
}

.inputBox {
	width: 430rpx;
	display: flex;
	align-items: center;
	position: relative;
	padding: 12rpx;
	border-bottom: 2rpx solid #e4e4e6;
	.text {
		flex: 1;
		font-size: 28rpx;
		color: #333333;

		.placeholder {
			color: #808080;
		}
	}
	.more {
		margin-left: 20rpx;
		width: 24rpx;
		height: 24rpx;
	}

	input {
		flex: 1;
		height: 40rpx;
		font-size: 24rpx;
		color: #393939;
		line-height: 40rpx;

		&::placeholder {
			color: #999999;
		}
	}

	.listBox {
		position: absolute;
		z-index: 5;
		width: 100%;
		top: 100%;
		left: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 0 5rpx 5rpx rgba(0, 0, 0, 0.08);

		.suggestionsItem {
			height: 60rpx;
			border-bottom: 2rpx solid #ccc;
			font-size: 24rpx;
			line-height: 60rpx;
			color: #393939;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;

			&:last-child {
				border-bottom: none;
			}
		}
	}
}
.popupContent {
	width: 100%;
	background: #ffffff;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	padding: 46rpx 24rpx calc(env(safe-area-inset-bottom) + 20rpx);

	.popupTop {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-size: 32rpx;
			color: #333333;
			display: flex;
			align-items: center;
			gap: 10rpx;
			view {
				border-radius: 8rpx;
				display: block;
				padding: 0 10rpx;
				max-width: 160rpx;
				height: 48rpx;
				font-size: 26rpx;
				color: #333333;
				line-height: 48rpx;
				text-align: center;
				background: #f2f3f5;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				&.active {
					background: #2c72ff;
					color: #fff;
				}
			}
		}
		.close {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.scrollViewBox {
		padding: 20rpx 0 0;
		.title {
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.scrollView {
			height: 40vh;
			width: 100%;

			.scrollContent {
				.item {
					font-size: 32rpx;
					color: #333333;
					padding: 18rpx 24rpx;
					border-radius: 24rpx;
					&:last-child {
						margin: 0;
					}

					&.active {
						color: #2c72ff;
						background: #f2f2f2;
					}
				}
			}
		}
	}
}
</style>
